<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直幻灯轮播的JS图片切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
	#container1{background-color:#BFDA00;}
	#container2{
		background-color:#2EBE21;
		height: 1024px;
	}
	#container3{
		background-color:antiquewhite;
		  margin: 20px;
	}
</style>


</head>
<body>
	<div id="container1" >123</div>
<div id="container2" >456
	<div id="container3"></div>
</div>
</body>
<script type="text/javascript">
    var total = $(window).height();
    $("#container1").css("height",total+"px");
    $("#container3").css("height",total+"px");

    //binding the mousemove when the mouse's middle button is released
        container.mousedown(function(e){
            //middle button
            if (e.which == 2){
                oldPageY = e.pageY;
                container.on('mousemove', mouseMoveHandler);
            }
        });

        //unbinding the mousemove when the mouse's middle button is released
        container.mouseup(function(e){
            //middle button
            if (e.which == 2){
                container.off('mousemove');
            }
        });

    var oldPageY = 0;
        function mouseMoveHandler(e){
            // moving up
            if(canScroll){
                if (e.pageY < oldPageY){
                    moveSectionUp();

                // moving downw
                }else if(e.pageY > oldPageY){
                    moveSectionDown();
                }
            }
            oldPageY = e.pageY;
        }

         function moveSectionUp(){
            var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL);

            //looping to the bottom if there's no more sections above
            if (!prev.length && (options.loopTop || options.continuousVertical)) {
                prev = $(SECTION_SEL).last();
            }

            if (prev.length) {
                scrollPage(prev, null, true);
            }
        };

        /**
        * Moves the page down one section.
        */
        function moveSectionDown(){
            var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);

            //looping to the top if there's no more sections below
            if(!next.length &&
                (options.loopBottom || options.continuousVertical)){
                next = $(SECTION_SEL).first();
            }

            if(next.length){
                scrollPage(next, null, false);
            }
        };


// $(document).scroll(function(){
//  console.log("document is scrolling");
// });
</script>
</html>